<template>
	<scroll-view scroll-y class="detail__view" :show-scrollbar="false">
		<image class="cover" :src="detailData.thumb || 'defImg'" mode="aspectFit" />
		
		<view class="container">
			
			<!-- 信息模块 -->
			<view class="info__container">
				<view class="info__title">{{ detailData.title }}</view>
				<view class="info__subTit">{{ detailData.subtitle }}</view>
				<view class="info__tip__con">
					<text>下单自动锁箱{{ detailData.lockBoxTime }}s</text>
				</view>
				<view class="info__footer__con">
					<view class="info__price__con">
						<text class="prefix">￥</text>
						<text class="price">{{ detailData.price }}</text>
						<text class="unit">/张</text>
					</view>
					<view class="info__num">剩{{ detailData.allNum }}张/共{{ detailData.allSold }}张</view>
				</view>
			</view>
			
			<!-- 锁箱倒计时 -->
			<view class="lock__box__container" v-if="!!detailData.lock.code">
				<view class="container">
					<image :src="detailData.lock.user.avatar" mode="aspectFill" />
					<view>
						{{ detailData.lock.user.nickName }}锁箱剩余<text>{{ detailData.lock.time }}</text>s
					</view>
				</view>
			</view>
			
			<!-- 主内容模块 -->
			<view class="content__container">
				<view class="top__operate__container">
					<view class="info__operate__container">
						<view>
							<view @click="openRecord">
								<image src='https://mh.synhaier.com/uploads/upload/index/2024/11/09/5f4dbd838e257e3d927bab1e81b74ad0.png' mode="aspectFill" />
								<text>开赏记录</text>
							</view>
							<view @click="buyDesc">
								<image src='https://mh.synhaier.com/uploads/upload/index/2024/11/09/6bb18ee3debaf4386be298f297a5291d.png' mode="aspectFill" />
								<text>购买说明</text>
							</view>
						</view>
						<view @click="initData(id)">
							<image src="https://mh.synhaier.com/uploads/upload/image/c0ef1fed-9a7f-3945-946a-2bb862eb37da.png" mode="aspectFit" />
							<!-- <image src="https://mh.synhaier.com/uploads/upload/index/2024/11/09/dc09b999eee4cf16db80b1a7f3e8ad9d.png" mode="aspectFit" /> -->
							<text>刷新</text>
						</view>
						<!-- <view>试玩</view> -->
					</view>
					<view class="switch__operate__container">
						<view @click="initData(before)">上一箱</view>
						<view>第{{ now }}箱/共{{ roomList.length }}箱</view>
						<view @click="initData(after)">下一箱</view>
					</view>
				</view>
				<u-row class="list__container">
					<u-col :span="4" v-for="item of awardList" :key="item.id">
						<view class="item__container" @click="shopPopup = true">
							<view class="top__container">
								<view class="top__left__tag">{{ item.num }}/{{ item.sold }}</view>
								<image :src="item.thumb" mode="widthFix" />
								<view class="not_num" v-if="item.num === 0">
									<image src="https://mh.synhaier.com/uploads/upload/index/2024/11/09/cf574beb26ab0b3a28c9f294a2baf8fb.png" mode="widthFix" />
								</view>
							</view>
							
							<view class="info__container">
								<view class="title__container">
									<view class="tag" :style="{ background: item.mark_color }">{{ item.mark_title }}</view>
									<view class="title">{{ item.title }}</view>
								</view>
								<view class="price">零售价：{{ item.price }}元</view>
								<view class="desc"><text v-if="item.show_rate != '只赠不售'">概率：</text>{{ item.show_rate }}</view>
								<!-- <view class="desc" v-if="item.mark_id != 5">概率：{{ item.show_rate }}%</view> -->
							<!-- 	<view class="desc">只赠不售</view> -->
							</view>
						</view>
					</u-col>
				</u-row>
			</view>
			
		</view>
		
		<view class="footer__container">
			<view class="btns__container">
				<view @click="handlePay(1)">欧一发</view>
				<view @click="handlePay(3)">欧三发</view>
				<view @click="handlePay(5)">欧五发</view>
				<view @click="handlePay(10)">欧十发</view>
			</view>
			<view class="sub__container">
				<image src="https://mh.synhaier.com/uploads/upload/index/2024/11/09/f99f47165a3afbd502c3ab5dd8e1c09d.png" @click="roomPopup = true" mode="aspectFill" />
				<image src="https://mh.synhaier.com/uploads/upload/index/2024/11/09/01b4bafe1d1e6918806e532ad5c51f6c.png" @click="handlePay(detailData.allNum)" mode="aspectFill" />
			</view>
		</view>
		
		<view class="hg__container" @click="$common.to({ url: '/package/mine/bag' })" >
			<image src="https://mh.synhaier.com/uploads/upload/index/2024/11/09/089d7ba1d4d61e4ad5b609fbfff6d31b.png" mode="widthFix" />
		</view>
		
		<!-- 商品弹窗 -->
		<u-popup v-model="shopPopup" mode="bottom" height="1200rpx" class="shop__popup">
			<u-tabs :list="shopTabs" bar-width="80" active-color="#000000" :current="shopCurTab" @change="(index) => shopCurTab = index" item-width='50%' :bar-style="{transform: `translate(${!shopCurTab ? 150 : 520}rpx, -100%)`}" />
			
			<!-- 商品列表 -->
			<scroll-view scroll-y v-if="!shopCurTab" class="list__container">
				<view class="item__container" v-for="item of awardList" :key="item.id">
					<image :src="item.thumb" mode="aspectFit" />
					<view class="info__container">
						<view class="title">
							{{ item.title }}
						</view>
						<view class="desc__container">
							<view>
								<!-- <view class="price">参考价格￥<text>{{ item.item.price }}</text></view> -->
								<view class="price">产品热度Y<text> <text style="margin-left: 5rpx;">{{ item.price }}</text> </text></view>
								<text>剩余{{ item.num }}件</text>
							</view>
					
						<!-- 	<view v-if="item.mark_id != 5">概率：{{ item.show_rate }}</view>
							<view v-else>只赠不售</view> -->
							<view><text v-if="item.show_rate != '只赠不售'">概率：</text>{{ item.show_rate }}</view>
							
						</view>
					</view>
				</view>
			</scroll-view>
			
			<!-- 商品详情 -->
			<scroll-view scroll-y v-if="!!shopCurTab" class="detail__container">
				<block v-html="detailData.editor"></block>
				<!-- <image src="../../uni_modules/HM-slotMachine/static/1.png" mode="widthFix" /> -->
			</scroll-view>
			
			<view class="clone__btn" @click="shopPopup = false">关闭详情</view>
		</u-popup>
		
		<!-- 开赏记录 -->
		<u-popup v-model="recordPopup" mode="bottom" height="1200rpx" class="record__popup" closeable>
			<view class="title">开赏记录({{ recordData.total || 0 }})</view>
			
			<scroll-view scroll-x class="tags__filter__con">
				<view :class="{ tag__con: true,  active: !recordMarkId }" @click="recordFilter('')">全部</view>
				<view :class="{ tag__con: true,  active: recordMarkId === item.id }" v-for="item of detailData.markList" :key="item.id" @click="recordFilter(item.id)">
					{{ item.title }}
				</view>
			</scroll-view>
			
			<scroll-view scroll-y class="record__list__container" @scrolltolower="recordPages">
				<block v-if="recordData.data.length > 0">
					<view class="item__container" v-for="(item, index) of recordData.data" :key="item.id">
						<view class="content__con">
							<view>
								<image class="round" :src="item.userInfo.avatar" mode="aspectFill" />
								<text>{{ item.userInfo.nickName }}</text>
							</view>
							<view>
								<view style="width: 30%;margin-right: 30rpx;" v-if="item.sort != '最终赏'">{{ item.sort }}</view>
							<!-- 	<view>{{ dateTimeFormat(item.created) }}</view> -->
								<view>{{ item.created }}</view>
							</view>
						</view>
						<view class="content__con">
							<view>
								<image :src="item.thumb" mode="aspectFill" />
								<text>{{ item.title }}</text> 
							</view>
							<view style="display: flex;">
								<view :class="{ mark__con: item.mark_title === '最终赏' }" style="margin-right: 20rpx;">{{ item.mark_title }}</view>
							 x1</view>
						</view>
					</view>
				</block>
				<u-empty v-else />
			</scroll-view>
		</u-popup>
		
		<!-- 切换房间窗口 -->
		<u-popup v-model="roomPopup" mode="bottom" height="1200rpx" class="room__popup" closeable>
			<view class="title">切换房间</view>
			
			<scroll-view scroll-y class="room__list__container" >
				<view class="item__container" v-for="(item, index) of roomList" :key="index" @click="switchRoom(item.id)">
					<view class="top__right__container">剩{{ item.allNum }}发</view>
					<view class="left__container">
						<image src="https://mh.synhaier.com/uploads/upload/index/2024/11/09/d3b643f2cdeb3c5e8b8b3161e40aff75.png" mode="aspectFill" />
						<view>第{{ index + 1 }}箱</view>
					</view>
					<view class="right__container">
						<view :span="6" v-for="(cItem, cIndex) of item.award" :key="cIndex">
							{{ cItem.title }} {{ cItem.num }}/{{ cItem.sold }}
						</view>
					</view>
				</view>
			</scroll-view>
		</u-popup>
		
		<!-- 支付窗口 -->
		<u-popup v-model="payPopup" mode="bottom" height="700rpx" class="pay__popup" closeable>
			<view class="title">{{ orderData.box.title }}</view>
			
			<view class="content__container">
				<view class="form__container">
					<view class="form__item">
						<view>单价:</view>
						<view>￥{{ orderData.box.price || 0 }}</view>
					</view>
					<view class="form__item">
						<view>数量:</view>
						<view class="num__container">
							<!-- <view :class="{ num: true, active: payData.draw_id == 1 }" @click="switchPayNum(1)">购1张</view>
							<view :class="{ num: true, active: payData.draw_id == 3 }" @click="switchPayNum(3)">购3张</view>
							<view :class="{ num: true, active: payData.draw_id == 5 }" @click="switchPayNum(5)">购5张</view>
							<view :class="{ num: true, active: payData.draw_id == 10 }" @click="switchPayNum(10)">购10张</view> -->
							<view :class="{ num: true, active: payData.draw_id == 1 }" @click="handlePay(1)">购1张</view>
							<view :class="{ num: true, active: payData.draw_id == 3 }" @click="handlePay(3)">购3张</view>
							<view :class="{ num: true, active: payData.draw_id == 5 }" @click="handlePay(5)">购5张</view>
							<view :class="{ num: true, active: payData.draw_id == 10 }" @click="handlePay(10)">购10张</view>
							<view :class="{ num: true, active: payData.draw_id == detailData.allNum }" @click="handlePay(detailData.allNum)">全包</view>
						</view>
					</view>
					<view class="form__item">
						<view>可用优惠券:</view>
						<view v-if="!couponList || couponList.length <= 0">
							暂无可用优惠卷
							<u-icon name="arrow-right"></u-icon>
						</view>
						<view v-else>
							<text @click="showCoupon" v-if="couponList[useIndex].money * 1 < orderData.discount.total_money * 1">
								{{ couponList[useIndex].money}}元
							</text>
						</view>
					</view>
					<!-- <view class="form__item">
						<view>可用红包:</view>
						<view>￥0</view>
					</view>
					<view class="form__item">
						<view>是否锁箱:</view>
						<u-switch v-model="payData.isSX" :size='32' active-color='#46BE2F'></u-switch>
					</view> -->
					<view class="form__item">
						<view>是否开启动画:</view>
						<u-switch v-model="payData.isDH" :size='32' active-color='#46BE2F'></u-switch>
					</view>
				</view>
				
				<view class="tip">
					<view>盒柜选择提货后7天内发货</view>
					<view>盒柜提货运费12元满三件包邮，不支持7天无理由退换货</view>
					<view>小计：￥<text>{{ orderData.discount.pay_money || 0 }}</text></view>
				</view>
				
				<u-checkbox-group class="agreem">
					<u-checkbox v-model="payData.checked" shape="circle" :label-disabled="false" :label-size="22" active-color="#FD2A1E">
						我已满18岁，已阅读并同意《用户使用协议》
					</u-checkbox>
				</u-checkbox-group>
				
				<view class="sub__btn" @click="handleBuy">确认购买</view>
			</view>
		</u-popup>
		
		<!-- 优惠券 -->
		<u-popup v-model="couponPopup" mode="bottom" height="800rpx" class="coupon__popup" >
			<view class="coupon-content">
				<scroll-view :scroll-y="true" class="list">
					<view class="li" v-for="(item,index) in couponList"
						v-if="item.money*1<orderData.discount.total_money*1" :key="item.id" @click="choose(index)">
						<view class="left">
							<view class="count"><text>￥</text>{{item.money}}</view>
							<view class="txt">优惠券</view>
						</view>
						<view class="right">
							<view class="title">{{item.money}}元优惠券</view>
							<view class="type">
								全场通用
							</view>
							<view class="time">领取后48小时内有效</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</scroll-view>
</template>

<script>
	// 公共接口校验
	const successFun = (res, callback) => {
		const { code, data } = res;
		if (code != 200) return;
		console.log(data)
		callback && callback(data);
	}
	
	export default {
		data() {
			return {
				id: '',
				detailData: {},
				awardList: [],
				
				shopPopup: false,
				shopTabs: [
					{ name: '商品列表' },
					{ name: '商品详情' },
				],
				shopCurTab: 0,
				
				lockBoxTime: null,
				
				recordPopup: false,
				recordData: {
					data: []
				},
				recordMarkId: '',
				recordPageData: {
					page: 1,
					per_page: 20
				},
				
				roomPopup: false,
				
				before: null,
				after: null,
				now: 1,
				roomList: [],
				
				payPopup: false,
				payData: {},
				orderData: '',
				
				couponPopup: false,
				couponList: null,
				useIndex: 0,
				
				url: {
					detail: '/v1/box/info',
					listChange: '/v1/box/listChange',
					recordList: '/v1/user/allAward',
					useCoupon: '/v1/box/useCoupon',
					order: '/v1/box/order',
				}
			}
		},
		onLoad(option) {
			const { id } = option;
			this.id = id;
			this.initData(id);
			this.getCouponList()
		},
		onShow() {
			this.initData(this.id);
		},
		methods: {
			// 初始化
			initData(id) {
				this.id = id;
				this.lockBoxTime && clearInterval(this.lockBoxTime)
				
				const success = (res) => successFun(res, (data) => {
					const { awardList, box } = data;
					
					this.awardList = awardList;
					this.detailData = box;
					this.shopTabs[0].name = `商品列表(${awardList.length})`
					
					if (!!box.lock.code) {
						this.lockBoxTime = setInterval(() => {
							
							this.detailData.lock.time --;
							
							if (this.detailData.lock.time === 0) {
								this.detailData.lock.code = 0;
								clearInterval(this.lockBoxTime)
							}
						}, 1000)
					}
				})
				
				const successListChange = (res) => successFun(res, (data) => {
					const { list, ...rest } = data;
					
					Object.assign(this, rest);
					this.roomList = list;
				})
				
				this.req({ url: this.url.detail, data: { id }, success })
				this.req({ url: this.url.listChange, data: { id }, success: successListChange })
			},
			
			// 获取优惠券
			getCouponList() {
				const _this = this
				this.req({
					url: this.url.useCoupon,
					success: res => res.code == 200 && (_this.couponList = res.data)
				})
			},
			
			// 获取开赏记录
			getRecord(init = true) {
				init && (this.recordPageData.page = 1)
				
				const success = (res) => successFun(res, (data) => {
					if (init) {
						this.recordData = data
					} else {
						const { data: recordData, ...rest } = data;
						this.recordData = {
							...rest,
							data: [...this.recordData.data, ...recordData]
						}
					}
				})
				
				this.req({ url: this.url.recordList, data: { box_id: this.id, mark_id: this.recordMarkId, ...this.recordPageData }, success })
			},
			
			// 打开开赏记录
			openRecord() {
				this.recordMarkId = ''
				this.recordPopup = true;
				this.getRecord();
			},
			
			// 筛选开赏记录
			recordFilter(markId) {
				this.recordMarkId = markId;
				this.getRecord();	
			},
			
			// 分页功能
			recordPages() {
				if (this.recordData.next_page) {
					this.recordPageData.page++;
					this.getRecord(false)
				}
			},
			
			// 切换房间
			switchRoom(id) {
				this.roomPopup = false
				this.initData(id)
			},
			
			// 时间格式转换
			dateTimeFormat(date) {
				console.log(date)
				const newDate = new Date(date);
				
				return newDate.toLocaleString('en-US', {
					month: '2-digit',
					day: '2-digit',
					hour: '2-digit',
					minute: '2-digit',
					second: '2-digit',
					hour12: false
				}).replace(',', '');
			},
			
			// 跳转购买说明
			buyDesc() {
				uni.navigateTo({ url: `/pages/index/rule?id=2` })
			},
			
			// 购买
			handlePay(draw_id) {
				// if (!!this.detailData.lock.code) {
				// 	uni.showToast({ icon: 'none' , title: '锁箱中，无法操作' })
				// 	return;
				// }
				
				this.$store.dispatch('getUserInfo').then((res) => {
					if (res.code == 200) {
						this.useIndex = 0
						this.createOrder(draw_id)
						this.payPopup = true;
						this.payData = { draw_id };
					}
				})
			},
			
			// 切换购买数量
			switchPayNum(draw_id) {
				this.payData.draw_id = draw_id;
				this.createOrder(draw_id);
			},
			
			// 创建订单
			createOrder(draw_id) {
				const coupon_id = this.couponList && this.couponList.length > 0 && this.couponList[this.useIndex].money * 1 < Math.floor(this.detailData.price * draw_id) * 1 ? this.couponList[this.useIndex].id : 0
				let data = {
					id: this.id,
					draw_id,
					invite_user_id: '',
					pay_type: 3,
					submit: 0,
					coupon_id
				}
				const success = (res) => successFun(res, (data) => (this.orderData = data))
				
				this.req({ url: this.url.order, data, success })
			},
				
			handleBuy() {
				// uni.navigateTo({
				// 	type: 1,
				// 	url: `/pages/index/draw?id=${37}&order_sn=${12939211}&drawNum=${318}&stop=${false}`,
				// })
				// return;
				if (!this.payData.checked) {
					uni.showToast({
						title: "请阅读并同意《用户使用协议》！",
						icon: 'none',
						mask: true
					})
					return
				}
				const coupon_id = this.couponList && this.couponList.length > 0 && this.orderData && this.couponList[this.useIndex].money * 1 < this.orderData.discount.total_money * 1 ? this.couponList[this.useIndex].id : 0
				let data = {
					id: this.id,
					...this.payData,
					invite_user_id: '',
					pay_type: 3,
					submit: 1,
					coupon_id
				}
				
				const success = (res) => successFun(res, (data) => {
					if(!this.payData.isDH){
						this.payData.isDH=false;
					}
					const drawTo = () => {
						uni.navigateTo({
							type: 1,
							url: `/pages/index/draw?id=${this.id}&order_sn=${data.order_sn}&drawNum=${this.orderData.box.num}&stop=${this.payData.isDH}`,
						})
					}
					if (data.pay_type == 2) {
						this.payPopup = false
						// this.$refs.buyRefs.close()
						drawTo()
						return
					}
					this.$common.orderPay(data).then(res1 => {
						console.log(res1);
						this.payPopup = false
						// this.$refs.buyRefs.close()
						drawTo();
					})
				})
				
				this.req({ url: this.url.order, data, success })
			},
			
			showCoupon() {
				this.couponPopup = true;
				// this.$refs.coupon.open('bottom')
			},
			
			choose(index) {
				this.useIndex = index
				this.couponPopup = false
				// this.$refs.coupon.close('bottom')
				this.createOrder(this.payData.draw_id)
			},
		}
	}
</script>

<style scoped lang="scss">
	$def-padding: 20rpx;
	$def-margin: 20rpx;
	$def-radius: 20rpx;
	$fs-lx: 36rpx;
	$fs-nx: 32rpx;
	$fs-sx: 28rpx;
	$btn-bg: linear-gradient(90deg, #D1F1D4 0%, #afed82 100%);
	
	@mixin padding {
		padding: $def-padding;
		box-sizing: border-box;
	};
	
	@mixin flex ($jc: center, $ai: center) {
		display: flex;
		justify-content: $jc;
		align-items: $ai;
	};
	
	@mixin btn {
		padding: $def-padding 40rpx;
		background: $btn-bg;
		border-radius: $def-radius;
	}
	
	@mixin ellipsis {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	.detail__view {
		// height: 100vh;
		background-color: #F4F6F5;
		padding-bottom: 240rpx;
		box-sizing: border-box;
		
		& .cover {
			height: 400rpx;
			background-color: $uni-bg-color;
		}
		
		& .container {
			@include padding;
			
			// start 信息模块
			& .info__container {
				@include padding;
				background: white;
				border-radius: $def-radius;
				
				.info__title {
					font-size: $fs-lx;
					font-weight: bold;
					margin-bottom: $def-margin;
				}
				
				.info__tip__con {
					margin-top: 20rpx;
					font-size: 24rpx;
					text {
						display: inline;
						padding: 2rpx 10rpx;
						border: 1px solid black;
						border-radius: 10rpx;
					}
				}
				
				.info__footer__con {
					margin-top: $def-margin;
					@include flex(space-between);
					
					.prefix {
						font-size: $fs-nx;
					}
					
					.price {
						font-size: 40rpx;
						font-weight: bold;
					}
					.info__num {
						font-size: 22rpx;
					}
				}
			}
			// end 信息模块
			
			& .lock__box__container {
				@include flex;
				& .container {
					padding: 10rpx $def-padding;
					border-radius: 50rpx;
					background-color: white;
					margin: auto;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					margin-top: $def-margin;
					
					& image {
						width: 45rpx;
						height: 45rpx;
						border-radius: 50%;
						margin-right: 10rpx;
					}
					
					& > view {
						@include flex;
					}
					
					& text {
						color: red;
						font-size: $fs-lx;
						font-weight: bold;
					}
				}
			}
			
			// start 主内容模块
			& .content__container {
				// @include padding;
				padding: $def-padding 10rpx;
				box-sizing: border-box;
				background: white;
				border-radius: $def-radius;
				margin-top: $def-margin;
				
				& .top__operate__container {
					margin-bottom: $def-margin;
					.info__operate__container {
						@include flex(space-between);
						
						& > view:first-child {
							display: flex;
							width: 50%;
							& > view {
								display: flex;
								align-items: center;
								image {
									width: 50rpx;
									height: 50rpx;
								}
								width: 50%;
							}
						}
						
						& > view:last-child {
							@include btn;
							display: flex;
							align-items: center;
							background: #000000;
							color: white;
							padding: 15rpx 50rpx;
							font-size: 24rpx;
							image {
								width: 30rpx;
								height: 30rpx;
								margin-right: 10rpx;
							}
							// border-radius: $def-radius;
							// color: white
						}
					}
					
					.switch__operate__container {
						@include flex(space-between);
						margin-top: $def-margin;
						padding: 0 20rpx;
						
						& > view {
							@include btn;
						}
					}
				}
			
				& .list__container {
					.item__container {
						position: relative;
						border-radius: $def-radius 10rpx 10rpx 10rpx;
						box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
						margin-bottom: $def-margin;
						.top__container {
							position: relative;
							border-radius: $def-radius 10rpx 10rpx 10rpx;
							height: 200rpx !important;
							overflow: hidden;
						}
						.top__left__tag {
							position: absolute;
							top: 0;
							left: 0;
							background: $btn-bg;
							border-top-left-radius: $def-radius;
							border-bottom-right-radius: $def-radius;
							font-size: 22rpx;
							padding: 10rpx 20rpx;
							z-index: 3;
						}
						
						& .not_num {
							width: 100%;
							height: 200rpx;
							position: absolute;
							top: 0;
							left: 0;
							z-index: 2;
							background-color: rgba(0, 0, 0, 0.3);
							border-radius: unset;
							border-top-left-radius: $def-radius;
							border-top-right-radius: 10rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							& > image {
								width: 70%;
							}
						}
						& > image {
							width: 100%;
							border-radius: unset;
							border-top-left-radius: $def-radius;
							border-top-right-radius: 10rpx;
							// background-color: red;
						}
					}
					& .info__container {
						padding: 10rpx;
						padding-bottom: $def-padding;
						font-size: 20rpx;
						line-height: 35rpx;
						color: #848484;
						.title__container {
							display: flex;
							align-items: center;
							margin-bottom: 8rpx;
							.tag {
								background-color: #eb5b51;
								font-size: 16rpx;
								color: white;
								padding: 0rpx 10rpx;
								border-radius: 5rpx;
								margin-right: 10rpx;
							}
							.title {
								font-size: 24rpx;
								color: #000000;
								flex: 1;
								font-weight: bold;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}
						}
					}
				}
			}
			
		}
		
		// 底部容器
		& .footer__container {
			position: fixed;
			z-index: 3000;
			bottom: 0;
			left: 0;
			right: 0;
			padding: $def-padding;
			padding-bottom: 40rpx;
			background-color: white;
			
			.btns__container {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: $def-margin;
				& > view {
					@include btn;
				}
			}
			
			.sub__container {
				display: flex;
				height: 100rpx;
				image:first-child {
					width: 30%;
					height: 100%;
					margin-right: 20rpx;
				}
				image:last-child {
					height: 100%;
					flex: 1;
				}
				// & > view:first-child {
				// 	background-color: #f0f0f0;
				// 	width: 30%;
				// 	margin-right: 20rpx;
				// 	padding: $def-padding 0;
				// 	border-radius: 50rpx;
				// 	@include flex;
				// }
				
				// & > view:last-child {
				// 	background-color: #c65032;
				// 	color: white;
				// 	flex: 1;
				// 	border-radius: 50rpx;
				// 	@include flex;
				// }
			}
		}
		
		// 盒柜
		& .hg__container {
			position: fixed;
			top: 20%;
			right: 0;
			image {
				width: 120rpx;
			}
		}
		
		// 商品窗口
		& .shop__popup {
			& .list__container {
				@include padding;
				height: calc(1200rpx - 90rpx);
				
				.item__container {
					display: flex;
					align-items: center;
					border-bottom: 1px solid #84848422;
					padding: 10rpx 0;
					box-sizing: border-box;
					image {
						width: 150rpx;
						height: 150rpx;
						border-radius: $def-radius;
						border: 1px solid #848484;
						margin-right: $def-margin;
					}
					
					& .info__container {
						flex: 1;
						line-height: 60rpx;
						
						.title {
							// font-size: $fs-nx;
							font-weight: bold;
						}
						
						& .desc__container {
							display: flex;
							justify-content: space-between;
							font-size: 24rpx;
							
							& > view:first-child {
								display: flex;
								& .price {
									color: #cd6b69;
									text {
										font-size: $fs-nx;
										font-weight: bold;
									}
								}
								
								& > text {
									margin-left: $def-margin;
									color: #c5c5c5;
								}
							}
							
							& > view:last-child {
								color: #c5c5c5;
							}
						}
					}
				}
			}
		
			& .detail__container {
				height: calc(1200rpx - 90rpx);
				& > img,
				& > image {
					width: 100%;
				}
			}
			
			& .clone__btn {
				position: fixed;
				bottom: 40rpx;
				left: 50%;
				padding: $def-padding 0;
				width: 50%;
				color: white;
				background-color: #000000;
				border-radius: 50rpx;
				text-align: center;
				font-weight: bold;
				transform: translateX(-50%);
			}
		}
		
		// 开赏记录窗口
		& .record__popup {
			& .title {
				font-size: $fs-lx;
				font-weight: bold;
				text-align: center;
				padding: $def-padding;
			}
			
			& .tags__filter__con {
				display: flex;
				padding: $def-padding 40rpx;
				width: 100%;
				white-space: nowrap;
				// width: 100vw;
				// overflow-x: scroll;
				.tag__con {
					display: inline-block;
					// width: 200rpx;
					border: 1rpx solid #E1E1E1;
					// padding: 8rpx 25rpx;
					padding: 8rpx 20rpx;
					font-size: $fs-sx;
					box-sizing: border-box;
					border-radius: 50rpx;
					margin-right: $def-margin;
					&.active {
						background-color: #fc7640;
						color: white;
					}
				}
			}
			
			& .record__list__container {
				height: 950rpx;
				@include padding;
				
				& .item__container {
					border: 4rpx solid #999999;
					padding: 30rpx $def-padding;
					box-sizing: border-box;
					line-height: 60rpx;
					margin-bottom: $def-padding;
					.content__con {
						@include flex(space-between);
						
						& .mark__con {
							background: #faf5d7;
							color: #e5a373;
							border-radius: 10rpx;
							font-size: 22rpx;
							padding: 0 10rpx;
							@include flex;
							height: 40rpx;
						}
						
						& > view:first-child {
							display: flex;
							align-items: center;
							width: 50%;
							& text {
								flex: 1;
								@include ellipsis;
							}
							
							& image {
								margin-right: 10rpx;
								width: 50rpx;
								height: 50rpx;
								
								&.round {
									border-radius: 50%;
								}
							}
						}
					
						& > view:last-child {
							flex: 1;
							display: flex;
							align-items: center;
							justify-content: flex-end;
						}
					}
				}
			}
		}
	
		& .room__popup {
			& .title {
				font-size: $fs-lx;
				font-weight: bold;
				text-align: center;
				padding: $def-padding;
			}
			
			& .room__list__container {
				height: 1000rpx;
				@include padding;
				& .item__container {
					border: 4rpx solid #999999;
					padding: 40rpx $def-padding $def-padding;
					box-sizing: border-box;
					margin-bottom: $def-margin;
					display: flex;
					position: relative;
					
					& .top__right__container {
						font-size: 24rpx;
						position: absolute;
						top: 5rpx;
						right: 5rpx;
						color: #e2d26e;
					}
					
					& .left__container{
						width: 20%;
						margin-right: $def-margin;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						
						& image {
							width: 50rpx;
							height: 50rpx;
							margin-bottom: 10rpx;
						}
					}
					
					& .right__container {
						display: flex;
						flex-wrap: wrap;
						flex: 1;
						& > view {
							margin-right: 20rpx;
						}
					}
				}
			}
		}
		
		// 支付弹窗
		& .pay__popup {
			& .title {
				font-size: $fs-lx;
				font-weight: bold;
				text-align: center;
				padding: $def-padding;
			}
			
			& .content__container {
				padding: 40rpx;
				box-sizing: border-box;
				
				& .form__container {
					
					& .form__item {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: $def-margin;
						
						& .num__container {
							display: flex;
							font-size: 22rpx;
							.num {
								margin-left: $def-margin;
								padding: 5rpx 20rpx;
								border-radius: 50rpx;
								border: 1px solid #848484;
								&.active {
									background-color: #000000;
									color: white;
								}
							}
						}
					}
				}
				
				
				& .tip {
					color: #E14B3E;
					line-height: 40rpx;
					
					& view:last-child {
						text-align: right;
					}
					
					text {
						font-weight: bold;
					}
				}
				
				& .agreem {
					display: flex;
					justify-content: center;
					margin: 40rpx 0 20rpx 0;
				}
				
				& .sub__btn {
					background-color: #000000;
					color: white;
					width: 80%;
					margin: auto;
					padding: $def-padding;
					box-sizing: border-box;
					font-weight: bold;
					border-radius: 50rpx;
					@include flex;
				}
			}
			
		}
		
		.coupon-content {
			width: 100vw;
			height: 70vh;
			background-color: #fff;
			padding-top: 40rpx;
		
			.list {
				width: 100%;
				height: calc(100% - 100rpx);
				position: relative;
				z-index: 3;
		
				.li {
					width: 90%;
					border-radius: 20rpx;
					background-color: #fff;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20rpx 30rpx;
					box-sizing: border-box;
					margin-bottom: 40rpx;
					box-shadow: 0 0 15rpx #aaa;
					margin-left: 5%;
		
					.left {
						width: 35%;
						border-right: 1rpx dashed #ddd;
						color: #da250f;
						text-align: center;
		
						.count {
							font-size: 44rpx;
							font-weight: bold;
		
							text {
								font-size: 26rpx;
							}
						}
		
						.txt {
							font-size: 24rpx;
							margin-top: 10rpx;
						}
					}
		
					.right {
						width: 65%;
						padding-left: 20rpx;
						box-sizing: border-box;
		
						.title {
							font-size: 28rpx;
							color: #000;
						}
		
						.type {
							width: 100rpx;
							margin: 10rpx 0;
							display: flex;
							align-items: center;
							justify-content: center;
							border-radius: 30rpx;
							border: 1rpx solid #d09069;
							color: #d09069;
							padding: 0rpx 10rpx;
							font-size: 20rpx;
						}
		
						.time {
							color: #999;
							font-size: 24rpx;
						}
					}
				}
			}
		}
	}
</style>